import React, { useState, useRef } from 'react';
import { SearchBar,List, InputItem, Icon as I,Picker, Toast } from 'antd-mobile';
import QueueAnim from 'rc-queue-anim';
import { history} from 'umi'
import { Icon, ListView} from '@/components'
import { educationSearch } from '@/services/edu'
import { storage,LOCALSTATE  } from '@/utils';
import style from './index.less'

const ListItem = (props) => {
  const [open, setOpen] = useState(false);
  const selectedItem = (item: any) => {
    history.push(`/search/detail?id=${item.id}`)
  };

  const changeOpen = (e, isOpen) => {
    e.stopPropagation();
    setOpen(isOpen);
  };
  return (
    <div className={style.listItem} onClick={() => selectedItem(props)} key={props.id}>
      <div className={style.userInfo}>
        <div className={style.user}>
          <p className={style.name}>{props.shortTitle}</p>
          {/* <span className={style.type}>{props.productName}</span> */}
        </div>
        <p className={style.date}>{props.createDateStr}</p>
      </div>
      
{/* 
      <div className={style.infoList}>
        <label>章节：</label>
        <span>{props.chapterName || '-'}</span>
        {!open && (
          <p className={style.tag} onClick={(e) => changeOpen(e, true)}>
            展开
            <I type="down"/>
          </p>
        )}
      </div> */}

      {/* {open && (
        <QueueAnim type="bottom" leaveReverse>
          <div key="name">
            <div className={style.infoList}>
              <label>答案：</label>
              <span>{props.correct||'-'}</span>
            </div>
            <div className={style.infoList}>
              <label>解析：</label>
              <span><div dangerouslySetInnerHTML={{__html: props.analyze||'-'}} /></span>
            </div>

            <div className={style.infoList}>
              <label>考点：</label>
              <span><div dangerouslySetInnerHTML={{__html: props.examPoint||'-'}} /></span>
              <p className={style.tag} onClick={(e) => changeOpen(e, false)}>
                收起
                <I type="up"/>
              </p>
            </div>
          </div>
        </QueueAnim>
      )} */}
    </div>
  );
};

function Search() {
  const [value,setValue] = useState<string>('')
  const [type,setType] = useState<any>([0])
  const [list,setList] = useState<any>([0])
  const [now,setNow]= useState(Date.now())
  const params = useRef<any>({key:storage.get('searchKey') });
  const listViewRef = useRef<any>();
  const local = storage.get(LOCALSTATE,true)

  const handeChange =(e)=>{
    setValue(e)
    params.current.key=e
  }
  const handeSearch = ()=>{
    if(!value) return Toast.fail('请填写搜索内容')
    console.log('value',value,type)
    storage.set('searchKey',value)
    listViewRef.current.reset();
  }

  const getData = async (pageNum?, pageSize?) => {
    const payload = {
      pageIndex:pageNum, pageSize,
      ...params.current,
      subjectId:local.currentSubjectId,
      type:type[0],
      // key:'题干'
      // ...this.searchParams,
    };
    // if(!params.current.key) return []
    const res = await educationSearch(payload);
    if (res.code !== 1) return [];
    const {
      list=[]
    } = res.response||{}
    console.log('list===',list)
    setNow(Date.now())
    setList(list)
    // if (Array.isArray(res.response?.list)) return res.response.list;
    return list
  };
  const row = (item) => {
    return <ListItem {...item} key={item.orderNo} />;
  };
  return (
    <div className={`${style.search} main-warp`}>
      <List>
        <InputItem
            placeholder="试题搜索"
            onChange={handeChange}
            defaultValue={params.current.key}
            extra={<Icon onClick={handeSearch} type="icon-sousuo1" />}
          >
            <Picker
            data={[{
              label: '全部',
              value: 0,
            },{
              label: '题干',
              value: 1,
            },{
              label: '选项',
              value: 2,
            },{
              label: '解析',
              value: 3,
            },{
              label: '考点',
              value: 4,
            }]}
            cols={1}
            value={type}
            onChange={(v)=>setType(v)}
            onOk={(v)=>setType(v)}
          ><List.Item ></List.Item></Picker>
        </InputItem>
        
        
      </List>

      <div className={style.listWrpper}>
        <ListView ref={listViewRef} getData={getData} renderRow={row} />
      </div>
    </div>
  );
}

export default Search;
